<!-- 项目能耗管理 -->

<template>
  <div class="flex flex-col w-full p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card -->
    <div
      class="flex-1 flex flex-col h-100%"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="h-50px lh-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">项目能耗管理</span>
      </div>
      <div class="w-full" style="height: calc(100% - 50px)">
        <!--查询表单 -->
        <el-form
          :inline="true"
          :model="formInline"
          class="m-20px pl-30px border-0 border-b border-solid border-#E0E0E0"
        >
          <el-form-item label="项目名称">
            <el-select v-model="formInline.xmmc" placeholder="请选择项目名称">
              <el-option
                v-for="(item, index) in xmmcList"
                :key="index"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属企业">
            <el-select v-model="formInline.ssqy" placeholder="请选择所属企业">
              <el-option
                v-for="(item, index) in qylbList"
                :key="index"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目类型">
            <el-select v-model="formInline.xmlx" placeholder="请选择项目类型">
              <el-option
                v-for="(item, index) in xmlxList"
                :key="index"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="选择时间范围">
            <el-date-picker
              v-model="formInline.times"
              type="daterange"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>

          <div class="mt-2px float-right">
            <el-button
              type="primary"
              class="w-80px rounded-15px"
              :icon="Search"
              @click="getPageList"
              >查询</el-button
            >
            <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="reset"
              >重置</el-button
            >
          </div>
        </el-form>

        <div class="text-right pr-20px pb-10px">
          <el-button type="primary" class="w-80px rounded-15px" :icon="Plus" @click="add"
            >新增</el-button
          >
          <el-button
            type="primary"
            class="w-80px rounded-15px"
            :icon="Download"
            @click="exportExcel"
            >导出</el-button
          >
        </div>
        <!--表格 -->
        <Table
          class="mt-20px"
          style="height: calc(100% - 200px)"
          :table-columns="tableColumns"
          :table-data="tableData"
        >
          <template #xmlxColumn="{ row }">
            <span>
              {{ formatXmlx(row.xmlx) }}
            </span>
          </template>
          <template #actionColumn="{ row }">
            <div class="flex justify-center">
              <el-button link type="primary" @click="query(row.id)">查看</el-button>
              <el-button link type="primary" @click="edit">编辑</el-button>
              <el-button link type="danger" @click="deleteData">删除</el-button>
            </div>
          </template>
        </Table>

        <el-pagination
          class="justify-end m-10px mt-15px"
          layout="total, sizes, prev, pager, next"
          :total="tableTotal"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <Dialog :visible="dialogAddShow" title="用能项目新增" width="1000px" @close="close">
    <el-form
      v-for="(formItem, formIndex) in ynxmFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
      :model="addForm"
      :rules="rules"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item
            v-if="
              item.key != 'xmmc' && item.key != 'ssqyId' && item.key != 'xmlx' && item.key != 'lxsj'
            "
            :label="item.label"
            :prop="item.key"
          >
            <el-input
              v-model="addForm[item.key]"
              :name="item.key"
              :type="item.type"
              :disabled="inputDisabled"
            ></el-input>
          </el-form-item>

          <el-form-item v-if="item.key == 'xmmc'" label="项目名称" :prop="item.key">
            <el-select v-model="addForm[item.key]" :name="item.key" placeholder="请选择项目名称">
              <el-option
                v-for="(item, index) in xmmcList"
                :key="index"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.key == 'ssqyId'" label="所属企业" :prop="item.key">
            <el-select v-model="addForm[item.key]" :name="item.key" placeholder="请选择所属企业">
              <el-option
                v-for="(item, index) in qylbIdList"
                :key="index"
                :label="item.qymc"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.key == 'xmlx'" label="项目类型" :prop="item.key">
            <el-select v-model="addForm[item.key]" :name="item.key" placeholder="请选择项目类型">
              <el-option
                v-for="(item, index) in xmlxList"
                :key="index"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.key == 'lxsj'" label="立项时间" :prop="item.key">
            <el-date-picker
              v-model="addForm[item.key]"
              :name="item.key"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择时间"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="text-right">
      <el-button class="w-80px h-40px" @click="close">取消</el-button>
      <el-button type="primary" class="w-80px h-40px" @click="addSave">保存</el-button>
    </div>
  </Dialog>

  <Dialog :visible="dialogEditShow" title="用能项目查看" width="1000px" @close="close">
    <el-form
      v-for="(formItem, formIndex) in ynxmFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
      :model="editForm"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item
            v-if="
              item.key != 'xmmc' && item.key != 'ssqyId' && item.key != 'xmlx' && item.key != 'lxsj'
            "
            :label="item.label"
          >
            <el-input
              v-model="editForm[item.key]"
              :name="item.key"
              :type="item.type"
              :disabled="inputDisabled"
            ></el-input>
          </el-form-item>

          <el-form-item v-if="item.key == 'xmmc'" label="项目名称">
            <el-select
              v-model="editForm[item.key]"
              :name="item.key"
              placeholder="请选择项目名称"
              :disabled="inputDisabled"
            >
              <el-option
                v-for="(item, index) in xmmcList"
                :key="index"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.key == 'ssqyId'" label="所属企业">
            <el-select
              v-model="editForm[item.key]"
              :name="item.key"
              placeholder="请选择所属企业"
              :disabled="inputDisabled"
            >
              <el-option
                v-for="(item, index) in qylbIdList"
                :key="index"
                :label="item.qymc"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.key == 'xmlx'" label="项目类型">
            <el-select
              v-model="editForm[item.key]"
              :name="item.key"
              placeholder="请选择项目类型"
              :disabled="inputDisabled"
            >
              <el-option
                v-for="(item, index) in xmlxList"
                :key="index"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="item.key == 'lxsj'" label="立项时间" :disabled="inputDisabled">
            <el-date-picker
              v-model="editForm[item.key]"
              :name="item.key"
              :disabled="inputDisabled"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择时间"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </Dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import type { FormRules } from 'element-plus'
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'
import * as XLSX from 'xlsx'

const formInline = reactive({
  xmmc: '',
  ssqy: '',
  xmlx: '',
  times: ['', ''],
})

// 定义列配置
const tableColumns = [
  {
    type: 'index',
    label: '序号',
    width: '80',
  },
  {
    prop: 'xmmc',
    label: '项目名称',
  },
  {
    prop: 'id',
    label: '项目id',
  },
  {
    prop: 'ssqyMc',
    label: '所属企业',
  },
  {
    label: '项目类型',
    type: 'slot',
    slotName: 'xmlxColumn',
  },
  {
    prop: 'xmjj',
    label: '项目描述',
    width: '200',
  },
  {
    prop: 'lxsj',
    label: '立项时间',
    width: '200',
  },
  {
    prop: 'xmfzr',
    label: '项目负责人',
    width: '120',
  },
  {
    prop: 'lxdh',
    label: '联系电话',
  },
  {
    prop: 'actions',
    label: '操作',
    width: '140',
    slotName: 'actionColumn',
    type: 'slot',
    align: 'center',
  },
]

const tableData = ref([])

//用能项目新增弹窗信息
const dialogEditShow = ref(false)
const dialogAddShow = ref(false)

const ynxmFormList = [
  {
    formLabelWidth: '160px',
    formList: [
      {
        label: '项目名称',
        type: 'input',
        key: 'xmmc',
        value: '',
      },
      {
        label: '所属企业',
        type: 'input',
        key: 'ssqyId',
        value: '',
      },
      {
        label: '项目类型',
        type: 'input',
        key: 'xmlx',
        value: '',
      },
      {
        label: '立项时间',
        type: 'day',
        key: 'lxsj',
        value: '',
      },
      {
        label: '项目负责人',
        type: 'input',
        key: 'xmfzr',
        value: '',
      },
      {
        label: '联系电话',
        type: 'input',
        key: 'lxdh',
        value: '',
      },
      {
        label: '项目能控目标',
        type: 'input',
        key: 'xmknmb',
        value: '',
      },
      {
        label: '项目产值目标',
        type: 'input',
        key: 'xmczmb',
        value: '',
      },
      {
        label: '项目描述',
        type: 'textarea',
        key: 'xmjj',
        span: 24,
      },
    ],
  },
]

//保存校验
const rules = reactive<FormRules>({
  xmmc: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
  ssqyId: [{ required: true, message: '所属企业不能为空', trigger: 'blur' }],
  xmlx: [{ required: true, message: '项目类型不能为空', trigger: 'blur' }],
  lxsj: [{ required: true, message: '立项时间不能为空', trigger: 'blur' }],
  xmfzr: [{ required: true, message: '项目负责人不能为空', trigger: 'blur' }],
})

// 转一下类型
const formatXmlx: any = computed(() => (item: any) => {
  let text = ''
  xmlxList.value.forEach((e: any) => {
    if (item == e.dm) {
      text = e.mc
    }
  })
  return text
})

const inputDisabled = ref(false)

//新增
const add = () => {
  //弹出框清空
  ynxmFormList[0].formList.forEach((e) => {
    e.value = ''
  })
  inputDisabled.value = false
  dialogAddShow.value = true
}

const close = () => {
  //弹出框清空
  ynxmFormList[0].formList.forEach((e: any) => {
    e.value = ''
  })
  addForm.value = {}
  dialogEditShow.value = false
  dialogAddShow.value = false
}

//新增保存
const addForm = ref({})
const addSave = () => {
  const data: any = addForm.value
  //校验
  if (data.xmmc == undefined || data.xmmc === '') {
    ElMessage({ message: '新增失败！项目名称不能为空', type: 'warning' })
    return
  }
  if (data.ssqyId == undefined || data.ssqyId === '') {
    ElMessage({ message: '新增失败！所属企业不能为空', type: 'warning' })
    return
  }
  if (data.xmlx == undefined || data.xmlx === '') {
    ElMessage({ message: '新增失败！项目类型不能为空', type: 'warning' })
    return
  }
  if (data.lxsj == undefined || data.lxsj === '') {
    ElMessage({ message: '新增失败！立项时间不能为空', type: 'warning' })
    return
  }
  if (data.xmfzr == undefined || data.xmfzr === '') {
    ElMessage({ message: '新增失败！项目负责人不能为空', type: 'warning' })
    return
  }

  ynxmxxInsertOrUpdate(data)
    .then((res: any) => {
      if (res != null) {
        dialogAddShow.value = false
        getPageList()
        ElMessage({ message: '新增成功！', type: 'success' })
      }
    })
    .catch((error) => {
      ElMessage({
        message: '新增失败! ' + error?.response?.data?.result?.resultMessage,
        type: 'error',
      })
    })
}

//查看
const editForm = ref({})
const query = (id: any) => {
  queryYnxmxxInfo({ xmId: id }).then((res: any) => {
    if (res != null) {
      editForm.value = res
      inputDisabled.value = true
      dialogEditShow.value = true
    }
  })
}

const edit = () => {
  ElMessageBox.confirm('暂无权限操作!', '提示', {
    confirmButtonText: '确认',
    type: 'warning',
    showCancelButton: false,
  }).then(() => {})
}

const deleteData = () => {
  ElMessageBox.confirm('暂无权限操作!', '提示', {
    confirmButtonText: '确认',
    type: 'warning',
    showCancelButton: false,
  }).then(() => {})
}

//分页查询
const pageNo = ref(1)
const pageSize = ref(10)
const tableTotal = ref(0)
const getPageList = () => {
  const data = {
    xmmc: formInline.xmmc,
    ssqy: formInline.ssqy,
    xmlx: formInline.xmlx,
    startTime: formInline.times[0],
    endTime: formInline.times[1],
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  }
  queryYnxmxxInfoList(data).then((res: any) => {
    tableData.value = res.records
    pageNo.value = res.current
    pageSize.value = res.size
    tableTotal.value = res.total
  })
}
//重置
const reset = () => {
  pageNo.value = 1
  pageSize.value = 10
  formInline.xmmc = ''
  formInline.ssqy = ''
  formInline.xmlx = ''
  formInline.times = ['', '']
  getPageList()
}
//分页按钮
const handleSizeChange = (val: number) => {
  console.log(`每页 ${val} 条`)
  pageSize.value = val
  getPageList()
}
const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`)
  pageNo.value = val
  getPageList()
}
//导出
const exportExcel = async () => {
  let fdArrayList: any = []
  const data = {
    xmmc: formInline.xmmc,
    ssqy: formInline.ssqy,
    xmlx: formInline.xmlx,
    startTime: formInline.times[0],
    endTime: formInline.times[1],
    pageNo: 1,
    pageSize: 5000,
  }
  await queryYnxmxxInfoList(data).then((res: any) => {
    fdArrayList = res.records
  })
  const fdArray: any = []
  fdArrayList.forEach(function (data: any, index: any) {
    const obj = {
      序号: index + 1,
      项目名称: data.xmmc,
      项目id: data.id,
      所属企业: data.ssqyMc,
      项目类型: data.xmlx,
      项目描述: data.xmjj,
      立项时间: data.lxsj,
      项目负责人: data.xmfzr,
      联系电话: data.lxdh,
    }
    fdArray.push(obj)
  })
  // 新建一个excel.xlsx
  const wb = XLSX.utils.book_new()
  // //封装JSON 数据
  const fdXslxws = XLSX.utils.json_to_sheet(fdArray)
  XLSX.utils.book_append_sheet(wb, fdXslxws, 'sheet')
  XLSX.writeFile(wb, '项目能耗数据' + '.xlsx')
  ElMessage({ message: '导出成功！', type: 'success' })
}

//加载项目名称
const xmmcList = ref([])
const getXmmc = () => {
  queryXmmcInfoList().then((res: any) => {
    xmmcList.value = res.xmmc
  })
}

//字典查询//企业 (不带企业Id)
const qylbList: any = ref([])
function getQymcInfo() {
  queryQymcInfoList().then((res: any) => {
    qylbList.value = res
  })
}

//字典查询//企业 (带企业Id)
const qylbIdList: any = ref([])
function getQyxxInfo() {
  queryQyxxInfoList().then((res: any) => {
    qylbIdList.value = res
  })
}

//加载项目类型
const xmlxList = ref([])
const getXmlx = () => {
  queryZdInfo({ zdxdm: 'xmlx' }).then((res: any) => {
    xmlxList.value = res
  })
}
//初始化
onMounted(() => {
  getPageList()
  getXmmc()
  getXmlx()
  getQymcInfo()
  getQyxxInfo()
})
</script>

<style></style>
